#app {
    padding: 12px;
    background-color: #eff1f7;
}

.search {
    display: flex;
    flex-wrap: wrap;
    padding: 20px;
    background-color: #fff;
}

.search .item {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.search .item .label {
    margin-right: 10px;
}

.w300 {
    width: 300px;
}

.headers {
    display: flex;
    flex-wrap: wrap;

}

.headers .item {
    width: 100%;
}
.headers .item .div1 {

    width: 10%;

}
.headers .item .div {
    width: 25%;
}
.headers .item .div5 {
    width: 15%;
}


.headers .item {
    display: flex;
    justify-content: center;
    text-align: center;
    padding: 20px 0;

}

.list {
    display: flex;

    flex-wrap: wrap;
}

.list .item {
    width: 100%;
    display: flex;
    background-color: #fff;
    /*margin-right: 2%;*/
    margin-bottom: 20px;
    position: relative;
    padding: 30px 0 20px;
}

.list .item:nth-child(2n) {
    margin-right: 0;
}

.list .item .sn {
    width: 18%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    border-right: 1px solid #ddd;
}

.list .item .sn .dd {
    width: 100%;
    height: 33%;
    border-bottom: 1px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}
     .list .item .sn .dd:last-child{
         border-bottom: 1px solid #fff;
     }

.list .item .left,
.list .item .right {
    width: 25%;
    padding: 10px 20px;
    position: relative;
    z-index: 1;
}

.list .item .cz {
    width: 8%;
    padding: 8px 20px ;
    position: relative;
    z-index: 1;
}


.list .item .right,
.list .item .left {
    border-right: 1px solid #ddd;
    position: relative;
    z-index: 1;
}

.list .item .pp {
    display: flex;
    margin-bottom: 12px;
    justify-content: space-between;
}

.list .item .pp:last-child {
    margin-bottom: 0;
}

.list .item .pp .title {
    width: 30%;
    margin-right: 10px;
}

.list .item .pp .content {
    width: 70%;
    text-align: right;
}

.list .item .status {
    color: #0285DD;
    background: rgba(2, 133, 221, 0.1);
    padding: 6px 0;
    text-align: center;
    z-index: 3;
    width: 100%;
    position: absolute;
    right: 0;
    top: 0;
}

.list .item .status2 {
    color: #00B83F;
    background: rgba(0,184,63,0.1);
    padding: 6px 0;
    text-align: center;
    z-index: 3;
    width: 100%;
    position: absolute;
    right: 0;
    top: 0;
}

.list .item .status3 {
    color: red;
    background: rgba(255,100,97,0.1);
    padding: 6px 0;
    text-align: center;
    z-index: 3;
    width: 100%;
    position: absolute;
    right: 0;
    top: 0;
}


.list .item .btn {
    color: #fff;
    background: #4277cf;
    /* padding: 12px 0; */
    text-align: center;
    z-index: 3;
    width: 100%;
    height: 40px;
    line-height: 40px;
    position: absolute;
    right: 0;
    bottom: 0;
    cursor: pointer;
    display: block;
}